import { defineComponent, watch, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = {}

    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        // 计算数据最大值，用于动态调整刻度
        const maxValue = Math.max(...val.lineData, ...val.barData);
        // 动态计算刻度间隔（将最大值分成更多份，这里示例分成 10 份）
        const interval = maxValue > 0 ? Math.ceil(maxValue / 10) : 10;

        options = {
          tooltip: {
            show: true,
            trigger: "item",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            show: true,
          },
          grid: {
            x: "8%",
            width: "88%",
            top: "5%",
            bottom: '7%'
          },
          xAxis: {
            data: val.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
                fontSize: 11,
                //rotate: 30
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              },
              // 关键修改：减小间隔值以增加刻度数量
              interval: interval, // 动态间隔（或直接设置固定值如 10）
              // 可选：设置最大值让刻度更完整
              max: Math.ceil(maxValue * 1.1) // 最大值设为数据最大值的 1.1 倍
            }
          ],
          series: [
            {
              type: "bar",
              barGap: "-100%",
              barWidth:30,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" }
                  ])
                }
              },
              z: -12,
              data: val.lineData,
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#ffffff'
              }
            }
          ]
        }
        if (chartRef.value) {
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "270px"
      const width = "100%"
      
      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})